<template>
  <div class="main">
    <t-layout>
      <sidebar :collapsed="collapsed"></sidebar>
      <t-layout>
        <t-header>
          <Header
            :collapsed="collapsed"
            @on-toggle-collapsed="toggleCollapsed"
          ></Header
        ></t-header>
        <t-content><router-view /></t-content>
        <t-footer>底部区域</t-footer>
      </t-layout>
    </t-layout>
  </div>
</template>

<script>
// 就是个路径，引入了就行，你怎么写都行
import Sidebar from './Sidebar.vue';
import Header from './header.vue';
export default {
  name: 'Layout',
  // import 完这里也要更新
  components: { Sidebar, Header },
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {
    toggleCollapsed(collapsed) {
      this.collapsed = collapsed;
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
}
</style>
